<template>
    <div class="container">
        <div class="pagetwo-header">
            <div class="header">
                <router-link tag="span" to="/home">&lt;</router-link>
                <h3>{{ lovecar.carname }}</h3>
            </div>
        </div>
        <div class="imges">
            <van-swipe height="220">
                <van-swipe-item v-for="item in lovecar.banner" :key="item.carid">
                    <img :src="item" alt="">
                </van-swipe-item>
            </van-swipe>

            <div class="content">
                <div class="title">
                    <h2>{{ lovecar.carname }}</h2>
                    <p>口碑<span>4.75分</span></p>
                </div>
                <div class="manyone">
                    <p>日租<span>205元</span>起</p>
                    <p>周租<span>1292元</span>起</p>
                </div>
                <div class="manytwo">
                    <p>月租<span>4920元</span>起</p>
                    <p>长租折扣<span>6-8折</span></p>
                </div>
                <div class="com-bottons">
                    <router-link tag="button" to="/search"
                        style="border-radius: 25px 5px 5px 25px;background-color: #02d095;">体验一下</router-link>
                    <button style="border-radius: 5px 25px 25px 5px;background-color: #ff7426;">领卷下单</button>
                </div>
            </div>
        </div>
        <div class="contrast">
            <div class="contrasts">
                <h2>同级对比</h2>
                <div class="carboxs">
                    <div class="cars">
                        <div class="imgs">
                            <img src="../assets/img/1.jpg" alt="">
                        </div>
                        <div class="text">
                            <p>玛莎拉蒂</p>
                            <strong>290<span>元/天</span></strong>
                        </div>
                        <div class="divide">4.16分</div>
                    </div>
                    <div class="cars">
                        <div class="imgs">
                            <img src="../assets/img/2.jpg" alt="">
                        </div>
                        <div class="text">
                            <p>宝马</p>
                            <strong>290<span>元/天</span></strong>
                        </div>
                        <div class="divide">4.36分</div>
                    </div>
                    <div class="cars">
                        <div class="imgs">
                            <img src="../assets/img/3.jpg" alt="">
                        </div>
                        <div class="text">
                            <p>玛莎拉蒂Ghibli3.0T</p>
                            <strong>290<span>元/天</span></strong>
                        </div>
                        <div class="divide">4.26分</div>
                    </div>
                </div>

            </div>
        </div>
        <div class="experience">
            <div class="experiences">
                <h2>大家体验后怎么样</h2>
                <div class="carbox">
                    <div class="cars">
                        <div class="imgs">
                            <img src="../assets/img/4.jpg" alt="">
                        </div>
                        <div class="text">
                            <p>蔚来 ES6怎么样</p>
                        </div>
                    </div>
                    <div class="cars">
                        <div class="imgs">
                            <img src="../assets/img/1.jpg" alt="">
                        </div>
                        <div class="text">
                            <p>蔚来 ES6怎么样</p>
                        </div>
                    </div>
                    <div class="cars">
                        <div class="imgs">
                            <img src="../assets/img/3.jpg" alt="">
                        </div>
                        <div class="text">
                            <p>蔚来 ES6怎么样</p>
                        </div>
                    </div>
                    <div class="cars">
                        <div class="imgs">
                            <img src="../assets/img/12.jpg" alt="">
                        </div>
                        <div class="text">
                            <p>蔚来 ES6怎么样</p>
                        </div>
                    </div>

                </div>
                <router-link tag="button" to="/search">评价不错,试驾一下</router-link>
            </div>
        </div>
        <div class="comments">
            <div class="commentss">
                <div class="title">
                    <h2>看看大家怎么说</h2>


                    <p @click="showPopup">查看更多<span>></span></p>

                </div>
                <van-popup v-model="show" position="bottom" :style="{ height: '80%' }">
                    <div class="textbox" v-for="item in comments" :key="item.id">
                        <div class="top">
                            <div class="imgs">
                                <img :src="item.img" alt="">
                            </div>
                            <div class="auto">
                                <div class="auto-title">
                                    <strong>{{ item.label }}</strong>
                                    <span>237元/天</span>
                                    <p>租车时间 2022.10.25</p>
                                </div>
                                <div class="star">
                                    <img src="../assets/img/lx.png" alt="">
                                    <img src="../assets/img/lx.png" alt="">
                                    <img src="../assets/img/lx.png" alt="">
                                    <img src="../assets/img/lx.png" alt="">
                                    <img src="../assets/img/hx.png" alt="">
                                </div>
                            </div>
                        </div>
                        <div class="text">
                            <p>
                                <em>{{ item.attitude }}：</em>
                                <span>{{ item.appraiseone }}</span>
                            </p>
                            <p>
                                <em>{{ item.attitudes }}：</em>
                                <span>{{ item.appraisetwo }}</span>
                            </p>
                        </div>
                    </div>
                </van-popup>
            
                <div class="textbox" v-for="item in comments" :key="item.id">
                    <div class="top">
                        <div class="imgs">
                            <img :src="item.img"  alt="">
                        </div>
                        <div class="auto">
                            <div class="auto-title">
                                <strong>{{item.label}}</strong>
                                <span>237元/天</span>
                                <p>租车时间 2022.10.25</p>
                            </div>
                            <div class="star">
                                <img src="../assets/img/lx.png" alt="">
                                <img src="../assets/img/lx.png" alt="">
                                <img src="../assets/img/lx.png" alt="">
                                <img src="../assets/img/lx.png" alt="">
                                <img src="../assets/img/lx.png" alt="">
                            </div>
                        </div>
                    </div>
                    <div class="text">
                        <p>
                            <em>{{item.attitude}}</em>
                            <span>{{item.appraiseone}}</span>
                        </p>
                        <p>
                            <em>{{item.attitudes}}</em>
                            <span>{{item.appraisetwo}}</span>
                        </p>
                    </div>
                    <div class="del">
                        <button @click="del(item.id)">删除</button>
                    </div>
                   
                </div>
                <div class="input">
                    <input type="text" v-model="comm" @keyup.enter="add" placeholder="请输入你的评论">
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { getLoveCar } from '@/api/lovecar';
import { getComments } from '@/api/comments';
import Swiper from "swiper";
export default {
    data() {
        return {
            // indexSwiper: 0,
            lovecar: null,
            show: false,
            comments: null,
            comm:"",//评论
            page:[]
          
        }
    },
    methods: {
        getLoveCarFun() {
            getLoveCar({ id: this.$route.query.id }).then(data => {
                let index = data.lovecar.findIndex(item => item.carid == this.$route.query.id)
                this.lovecar = data.lovecar[index];
                console.log(data.lovecar[index]);
            })
        },
        showPopup() {
            this.show = true;
        },
        //评论提交
        add(){
            this.comments.unshift({
                id:this.id,
                img:"../assets/img/portrait-default (1).png",
                label:"郑布挫",
                attitude:"满意：",
                appraiseone:this.comm

            })
            
            this.comm = ""

            this.page.push(this.comments)
            window.localStorage.setItem("comm", JSON.stringify(this.page))
        },
        //删除评论
        del(id){
            // console.log(id);
            let index = this.comments.findIndex(item=>item.id==id);
            this.comments.splice(index,1)
             localStorage.removeItem('comm',JSON.stringify(this.page))
        }
    },

    created() {
        if ("id" in this.$route.query) {
            this.getLoveCarFun();
        }
        if(localStorage.comm){
            this.comments = JSON.parse(localStorage.getItem("comm"))
        }
        getComments().then(data => {
            console.log(data);
            this.comments = data.comments
        })


    },
    updated() {
        new Swiper(".swiper-selectedSong", {
            slidesPerView: "auto",
            spaceBetween: 12,
            observer: true,
            observeParents: true, //自动初始化父节点swiper对象
        });
    },
}
</script>

<style lang="scss" scoped>
.pagetwo-header {
    width: 100%;
    background-color: #fff;

    .header {
        width: 90%;
        height: 55px;
        margin: 0 auto;
        line-height: 55px;

        span {
            float: left;
            font-size: 20px;
            font-weight: 800;
            font-family: "仿宋";
        }

        h3 {
            text-align: center;
            font-weight: 400;
        }
    }
}

.imges {
    width: 100%;

    img {
        width: 100%;
        height: 270px;
    }

    .content {
        width: 90%;
        margin: 0 auto;

        .title {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 25px;

            h2 {
                color: #3c3c5a;
            }

            p {
                font-size: 15px;
                color: #68687f;

                span {
                    color: #ff7a7a;
                }
            }
        }

        .manyone {
            display: flex;
            margin-bottom: 12px;
            margin-top: 25px;

            p {
                font-size: 13px;
                margin-right: 80px;

                span {
                    color: #ff7a7a;
                    margin-left: 10px;
                }
            }
        }

        .manytwo {
            display: flex;

            p {
                font-size: 13px;
                margin-right: 71px;

                span {
                    color: #ff7a7a;
                    margin-left: 10px;
                }
            }
        }

        .com-bottons {
            display: flex;
            margin-top: 25px;

            button {
                width: 162px;
                height: 46px;
                margin-right: 6px;
                border: none;
                color: #fff;
                font-size: 15px;
                font-weight: 600;
            }
        }
    }
}

.contrast {
    width: 100%;
    margin-top: 65px;

    .contrasts {
        width: 90%;
        margin: 0 auto;

        h2 {
            color: #3c3c5a;
        }

        .carboxs {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;

            .cars {
                width: 165px;
                margin-top: 15px;
                position: relative;

                .imgs {
                    width: 165px;
                    height: 106px;
                    border-radius: 5px;
                    overflow: hidden;

                    img {
                        width: 100%;
                        height: 100%;
                    }
                }

                .text {
                    display: flex;
                    justify-content: space-between;
                    margin-top: 10px;

                    p {
                        font-size: 13px;
                        color: #8a8a9c;
                    }

                    strong {
                        font-size: 15px;
                        color: #ff9494;

                        span {
                            font-size: 12px;
                        }
                    }
                }

                .divide {
                    width: 56px;
                    height: 24px;
                    background-color: #ffdf2f;
                    text-align: center;
                    line-height: 24px;
                    font-size: 13px;
                    position: absolute;
                    top: 0;
                    right: 0;
                }
            }
        }
    }
}

.experience {
    width: 100%;
    margin-top: 65px;

    .experiences {
        width: 90%;
        margin: 0 auto;

        h2 {
            color: #3c3c5a;
        }

        .carbox {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;

            .cars {
                width: 165px;
                margin-top: 15px;

                .imgs {
                    width: 165px;
                    height: 106px;
                    border-radius: 5px;
                    overflow: hidden;

                    img {
                        width: 100%;
                        height: 100%;
                    }
                }

                .text {
                    p {
                        font-size: 13px;
                    }
                }
            }

        }

        button {
            width: 100%;
            height: 45px;
            border-radius: 50px;
            background-color: #edfcf8;
            color: #68e2c1;
            border: none;
            margin-top: 25px;
        }
    }
}

.comments {
    width: 100%;
    margin-top: 50px;
    margin-bottom: 10px;
    padding-bottom: 60px;
    .commentss {
        width: 90%;
        margin: 0 auto;

        .title {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;

            h2 {
                color: #3c3c5a;
            }

            p {
                font-size: 13px;
                color: #8f8fa0;

                span {
                    font-weight: 600;
                    transform: scaleX(0.5);
                }
            }
        }

        .textbox {
            width: 100%;
            border: 1px solid #f3f3f5;
            border-radius: 10px;
            margin-bottom: 7px;
            position: relative;

            .top {
                display: flex;
                align-items: center;

                .imgs {
                    width: 40px;
                    height: 40px;
                    border-radius: 50%;
                    overflow: hidden;
                    margin: 18px 10px 18px 18px;

                    img {
                        width: 100%;
                        height: 100%;
                    }
                }

                .auto {
                    .auto-title {
                        display: flex;
                        font-size: 12px;

                        strong {
                            font-size: 15px;
                        }

                        span {
                            color: #ff7e7e;
                            margin-left: 15px;
                        }

                        p {
                            color: #c0c0ca;
                            margin-left: 10px;
                        }
                    }

                    .star {
                        display: flex;
                        margin-top: 5px;

                        img {
                            width: 12px;
                            height: 12px;
                        }
                    }
                }
            }

            .text {
                font-size: 12px;
                margin: 0 15px 15px 15px;

                em {
                    font-style: normal;
                    font-size: 14px;
                    font-weight: 600;
                }
            }
            .del{
                position: absolute;
                top: -2px;
                right: 0;
                
                button{
                    width: 35px;
                    height: 20px;
                    font-size: 12px;
                    border: none;
                    color: #c0c0ca;
                    border-top-right-radius: 10px;
                }
            }
        }

        .input {
            padding-bottom: 10px;
            position: fixed;
            bottom: 0;
            background-color:#fff ;
            width: 100%;
            input {
                width: 90%;
                height: 45px;
                border-radius: 50px;
                background-color: #edfcf8;
                border: none;
                margin-top: 10px;
                padding-left: 10px;
                
            }
        }
    }
}
</style>